<template>
  <div>
    <Header></Header>

    <div id="nav" style=" display:inline-block;width:300px;margin:100px 100px 100px 100px;">
      <el-row class="tac">
        <el-col :span="12">
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-menu-item index="1">
              <span slot="title" @click="goinfo()">基本设置</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span slot="title" @click="gopasswd()">修改密码</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <!-- 修改个人信息动态框 -->
    <el-dialog style="width:800px;margin:0px auto;" title :visible.sync="infodialogForm">
      <el-form ref="form" label-width="80px">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:80/user/uploadPortral"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-button
          style="width:100%;margin:0px auto;background-color: #00B38A;font-size:20px"
          type="primary"
          @click="changeInfo()"
        >确 定</el-button>
      </el-form>
    </el-dialog>
    <!-- 修改密码动态框 -->
    <el-dialog style="width:800px;margin:0px auto;" title :visible.sync="passwddialogForm">
      <el-form ref="form" label-width="80px">
        <h3>修改密码</h3>
        <el-form-item label="当前密码">
          <el-input v-model="passwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="newpasswd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="checkpasswd"></el-input>
        </el-form-item>
        <el-button
          style="width:100%;margin:0px auto;background-color: #00B38A;font-size:20px"
          type="primary"
          @click="changePasswd()"
        >确 定</el-button>
      </el-form>
    </el-dialog>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条
export default {
  name: "Setting",
  components: {
    Header,
    Footer
  },
  data() {
    return {
      userDTO: null,
      infodialogForm: false,
      passwddialogForm: false,
      imageUrl: "",
      name: "",
      newpasswd: "",
      checkpasswd: "",
      passwd: ""
    };
  },
  created() {
    this.userDTO = JSON.parse(localStorage.getItem("user"));
    console.log(this.userDTO);
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = res;
    },

    // 打开修改信息弹框
    goinfo() {
      this.passwddialogForm = false;
      this.infodialogForm = true;
    },
    // 打开修改密码弹框
    gopasswd() {
      this.infodialogForm = false;
      this.passwddialogForm = true;
    },
    // 修改个人信息
    changeInfo() {
      return this.axios
        .post("http://localhost:80/user/updateUserInfo", {
          name: this.name,
          portrait: this.imageUrl,
          id: this.userDTO.content.id
        })
        .then(res => {
          this.userDTO.content.name = this.name;
          this.userDTO.content.portrait = this.imageUrl;
          localStorage.setItem("user", JSON.stringify(this.userDTO));
          location.reload();
        })
        .catch(err => {
          this.$message.error("修改信息失败");
        });
      this.infodialogForm = false;
    },
    // 修改密码
    changePasswd() {
      if (this.passwd === this.userDTO.content.password) {
        if (this.newpasswd === this.checkpasswd) {
          if (this.passwd === this.newpasswd) {
            this.$message.error("新密码和原密码一致，请重新输入");
          } else {
            return this.axios
              .post("http://localhost:80/user/updatePassword", {
                password: this.newpasswd,
                id: this.userDTO.content.id
              })
              .then(res => {
                this.$message.success("修改密码成功，请重新登录");
                localStorage.setItem("user", null);
                this.$router.push("/");
              });
          }
        } else {
          this.$message.error("两次输入密码不一致");
        }
      } else {
        this.$message.error("原密码输入错误");
      }
    }
  }
};
</script>
<style>
#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
